<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"  crossorigin="anonymous"></script>
  <title>装修记账</title>
</head>
<style>
  header{
    width: 100%;
    height: 70px;
    color: white;
    background-color: #5FC0CD;
  }
  .register{
    float: left;
    text-align: left;
    padding-left: 2%;
    width: 20%;
    height: 70px;
    line-height: 70px;
    font-size: 1em;
  }
  .login{
    float: left;
    text-align: center;
    width: 56%;
    height: 70px;
    line-height: 70px;
    font-size: 1em;
  }
  .close{
    float: left;
    text-align: right;
    padding-right: 2%;
    width: 20%;
    height: 70px;
    line-height: 70px;
    font-size: 1em;
  }
  .bg-div{
    float: left;
    margin: 12px 0 12px 0;
    width: 100%;
    height: 70px;
    display: flex;
    background-color: white;
  }
  img{
    width: 20px;
    height: 30px;
    margin: 1em 0 1em 1em;
  }
  .phone-text{
    margin: 0 0 1rem;
    height: 30px;
  }
  .lock-text{
    margin: 0 0 1rem;
    height: 30px;
    border-left: 2px solid #D4D4D4;
  }
  .button-login{
    float: left;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 1em;
    color: white;
    background-color: #386559;
  }
  .no-password{
    float: right;
    margin: 2% 2% 0 0;
    width: 65px;
    height: 20px;
  }
  a{
    color: #66cccc;
  }

</style>
<script type="text/javascript">
function del(id){
  alert(id)
  if (window.confirm("确认删除？")){
      $.ajax({
        url:"http://localhost:8080/",
        type:"POST",
        data:{id:id},
        dataType:"json",
        success:function (result){
          window.location.reload();
        },
        error:function (){
          alert("删除失败");
        }
      })
  }
}
</script>
<body>
<header>
  <div class="register"></div>
  <div class="login">账单</div>
</header>
<form th:action="@{/search}" method="post">
  类别：<select name="type">
        <option text="" value=""></option>
        <option th:each="a:${types}" th:text="${a.getType()}" th:value="${a.getType()}"></option>
      </select>
  时间区间：<input type="date" name="dateStart" ><input type="date" name="dateEnd">
  <button type="submit" class="btn btn-info">查询</button>
</form>

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">消费原因</th>
      <th scope="col">消费金额</th>
      <th scope="col">消费时间</th>
      <th scope="col">#</th>
    </tr>
  </thead>
  <tbody >
      <tr th:each="a:${allMonies}">
        <td th:text="${a.getReason()}"></td>
        <td th:text="${a.getMoney()}"></td>
        <td th:text="${#dates.format(a.getDate(), 'yyyy-MM-dd')}"></td>
        <td><a type="button" class="btn btn-danger" th:href="@{/del/{id}(id=${a.getId()})}">删除</a></td>
      </tr>
  </tbody>
</table>
总计消费：<span th:text="${allMoney}"></span>
<button class="button-login" type="button" ><a th:href="@{/toL}">记一笔</a></button>
</body>

</html>